import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
class IconButton extends Component {
  constructor(props) {
    super()
    this.state = {}
  }

  render() {
    let {
      icon,
      children,
      iconAtFront,
      iconColor,
      style,
      className,
      onClick,
    } = this.props
    return (
      <div>
        <p>icon:{icon}</p>
        <p>children:{children}</p>
        <div>
          {iconAtFront ? (
            <div>
              <FontAwesomeIcon style={{ color: iconColor }} icon="gem" />{' '}
              <span>文字</span>
            </div>
          ) : (
            <div>
              <span>文字</span>
              <FontAwesomeIcon style={{ color: iconColor }} icon="gem" />
            </div>
          )}
        </div>
        <p style={style}>style字体</p>
        <p>className:{className}</p>
        <button onClick={onClick}>button</button>
      </div>
    )
  }
}
export default IconButton

IconButton.propTypes = {
  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
  children: PropTypes.string.isRequired,
  iconColor: PropTypes.string.isRequired,
  style: PropTypes.object,
  className: PropTypes.string.isRequired,
  onClick: PropTypes.func,
}
